<script setup lang="ts">
import { ref, onMounted } from 'vue'

const barrageContainer = ref<HTMLDivElement | null>(null)

const barrageItems = ref<string>('')

const items = ['测试弹幕测试弹幕']

onMounted(() => {
    if (!barrageContainer.value) return
    const height = barrageContainer.value.offsetHeight
    const width = barrageContainer.value.offsetWidth

    // const maxTop = height - 30
    // const minTop = 30 - 24
    // const maxLeft = width
    // const minLeft = width

    // items.forEach(item => {
    //     const el = document.createElement('div')
    //     el.innerText = item
    //     el.classList.add('barrage-item')
    //     el.style.top = '50px'
    //     el.style.left = `${maxLeft}px`
    //     barrageContainer.value?.appendChild(el)
    // })
})
</script>

<template>
    <!-- <div class="barrage-item">测试弹幕测试弹幕</div> -->
    <div
        ref="barrageContainer"
        class="barrage-container base-card"
    >
        <div class="barrage-item barrage-item-animation">测试弹幕测试弹幕</div>
    </div>
</template>

<style>
@keyframes barrage-animation {
    0% {
        transform: translate(1000px);
    }

    100% {
        transform: translate(0px);
    }
}

.barrage-container {
    position: relative;
    /* overflow: hidden; */

    .barrage-item {
        width: fit-content;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 14px;
        padding: 0 5px;
        border-radius: 3px;
        cursor: pointer;
        transform: translate(1000px);
        background-color: red;
    }

    .barrage-item-animation {
        animation-name: barrage-animation;
        /* 开始执行动画之前等待的时间量 */
        animation-delay: 0ms;
        /* 设置动画是应正向播放、反向播放还是在正向和反向之间交替播放 */
        animation-direction: normal;
        /* 完成一个动画周期所需的时间 */
        animation-duration: 10s;
        /* 画在执行之前和之后如何将样式应用于其目标 */
        animation-fill-mode: none;
        /* 设置动画序列在停止前应播放的次数 */
        animation-iteration-count: infinite;
        animation-play-state: running;
        animation-timing-function: ease-in-out;
    }
}
</style>
